<template>
	<!-- 登录确认 -->
	<uni-popup ref="alertDialog" type="dialog" style="z-index: 9999;">
		<uni-popup-dialog 
			cancelText="取消" confirmText="同意" 
			title="蓉蓉辅料" content="是否注册并登录" 
			@confirm="login"
			></uni-popup-dialog>
	</uni-popup>

	<view class="container">
		<view class="top">
			<view class="iconC" @click="this.changeSearch(1,'')">
				<view align="center"><image style="width: 100rpx;height: 100rpx;" src="../../static/icon/baokuan.png"></image></view>
				<text class="iconText">当季爆款</text>
			</view>
			<view class="iconC" @click="this.changeSearch(2,'')">
				<view align="center"><image style="width: 100rpx;height: 100rpx;" src="../../static/icon/xinpin.png"></image></view>
				<text class="iconText">新品上架</text>
			</view>
			<view class="iconC" @click="this.changeSearch(3,'')">
				<view align="center"><image style="width: 100rpx;height: 100rpx;" src="../../static/icon/tuijian.png"></image></view>
				<text class="iconText">店铺推荐</text>
			</view>
			<view class="iconC" @click="showDrawer('showLeft')">
				<view align="center"><image style="width: 100rpx;height: 100rpx;" src="../../static/icon/fenlei.png"></image></view>
				<text class="iconText">分类查询</text>
			</view>
		</view>
		<!-- 中间部分 -->
		<view class="mid">
			<!-- 暂无数据 -->
			<view class="noData" v-if="newSpList.length===0">暂无数据</view>
			<!-- 卡片展示 -->
			<view class="spCard" v-for="(item, index) in newSpList">
				<view @click="TanPreviewImage(staticNew + item.pic)" class="spPic"><image mode="aspectFill" style="width: 100%;height: 100%;" :src="staticNew + item.pic"></image></view>
				<span class="spText">{{item.tabName}}</span>
			</view>

			
		</view>
		<!-- 左侧抽屉 -->
		<uni-drawer ref="showLeft" mode="left" :width="320" @change="change($event,'showLeft')" class="showLeft">
			<uni-section type='line' title="请选择类别"></uni-section>
			<view class="scroll">
				<view v-for="(item, index) in tabList">
					<uni-collapse-item :title="index" :title-border='show' :show-arrow=false>
						<view  v-for="item in tabList[index]" @click="changeSearchTab(item)" class="tabSelectLine">
							{{item}}
						</view>
					</uni-collapse-item>
				</view>
			</view>
		</uni-drawer>
	</view>
</template>

<script>
	import config from "../../utils/config.js"
	export default {
		onLoad() {
			this.getNewSpData()
			this.getTabListData()
		},
		data() {
			return {
				staticNew: config.staticNew,
				newSpList: [],
				tabList:{},
				pageData:{
					page:1,
					pageSize:10,
				},
				type:0,
				tab: '',
			}
		},
		mounted() {
			// uni.setStorageSync('userData', 'aa')
			// uni.removeStorageSync('userData')
			if (!uni.getStorageSync('userData')){
				this.$refs.alertDialog.open()
			}
		},
		methods:{
			// 登录
			login() {
				let that = this
				//判断缓存中是否有用户数据（也就是判断有没有登录）
				if (!uni.getStorageSync('userData')) {
					uni.login({
						provider:"weixin",
						success: function(event){
							console.log(event)
							//开始登录
							that.request({
								url: config.baseUrl + "/xcx/getOpenId",
								data: {
									code: event.code,
								}
							}).then(res => {
								// 设置
								uni.setStorageSync('userData', res.data)
							})
						},
						fail: function(e){
							uni.showToast({
								title: '授权失败',
								icon: 'none',
								duration:2000
							});
						},
					})
				} else {
					console.log('登陆过了')
				}
			},
			
			
			
			// 获取新品数据
			getNewSpData(){
				let that = this
				this.request({
					url: config.baseUrl + "/wx/getNewSpData",
					data: {
						page: that.pageData.page,
						pageSize: that.pageData.pageSize,
						type: that.type,
						tab: that.tab,
					},
				}).then(res => {
					that.newSpList = that.newSpList.concat(res.data)
				})
			},
			// 预览图片
			TanPreviewImage(imageUrl){ 
				var images = [];
				images.push(imageUrl);
				uni.previewImage({ // 预览图片 
						current:0,
						urls:images,
						longPressActions: {  //长按保存图片到相册
								itemList: ['保存图片'],
								success: (data)=> {
										// console.log(data);
										uni.saveImageToPhotosAlbum({ //保存图片到相册
												filePath: payUrl,
												success: function () {
														uni.showToast({icon:'success',title:'保存成功'})
												},
												fail: (err) => {
														uni.showToast({icon:'none',title:'保存失败，请重新尝试'})
												}
										});
								},
								fail: (err)=> {
										console.log(err.errMsg);
								}
					}
				});
			},
			// 修改查询方式
			changeSearch(type, tabName){
				this.type = type
				this.pageData.page = 1
				this.newSpList = []
				this.getNewSpData()
			},
			// 修改
			changeSearchTab(item){
				this.tab = item
				this.type = 4
				this.pageData.page = 1
				this.newSpList = []
				this.closeDrawer('showLeft')
				this.getNewSpData()
			},
			// 打开窗口
			showDrawer(e) {
				this.$refs[e].open()
			},
			// 关闭窗口
			closeDrawer(e) {
				this.$refs[e].close()
			},
			// 获取列表
			getTabListData(){
				let that = this
				this.request({
					url: config.baseUrl + "/wx/getTabListData",
				}).then(res => {
					that.tabList = {}
					let data = res.data
					for (let i =0;i<data.length;i++){
						if (data[i].aName in that.tabList){
							that.tabList[data[i]['aName']].push(data[i]['bName'])
						}else{
							that.tabList[data[i]['aName']] = [data[i]['bName']]
						}
					}
					// console.log(that.tabList)
				})
			}
		},
	}
</script>

<style lang="scss">
	page{
		background-color:#eee;
	}
	.scroll{
		overflow-y: auto;
		overflow-x: auto;
		height: 100vh;
	}
	.lbcard{
		float: left;
		border:1rpx solid #e08020;
		margin: 10rpx;
		padding: 20rpx;
		font-size: 40rpx;
	}
	.showLeft{
		.tabSelectLine{
			font-size: 40rpx;
			border: 5rpx solid #eee;
			padding: 10rpx;
			padding-left: 40rpx;
			color: #666;
		}
	}


	.top{
		width: 100%;
		background-color: #fff;
		height: 150rpx;
		
		.iconC {
			width: 25%;
			height: 200rpx;
			float: left;
			text-align: center;
			
			.iconImg {
				width: 100rpx;
				height: 100rpx;
			}
			
			.iconText {
				font-size: 30rpx;
				color: #aaa;
			}
		}
	}

	.mid{
		.noData{
			text-align: center;
			color: #aaa;
			
		}
		.spCard{
			display: inline-block;
			width:50vw;
			background-color: white;
			text-align: center;
			
			.spPic{
				width:48vw;
				height: 48vw;
				margin: 1vw;
				margin-bottom: 0;
				
			}
			
			.spText{
				margin-left: 1.5vw;
			}
		}
	}
</style>

